<template>
  <a-modal centered :title="title" v-model.trim="visible" destroyOnClose :maskClosable="false" :confirmLoading="confirmLoading" @ok="handleOk" width="600px">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
      <a-form-model-item label="上级菜单" :labelCol="{span:4}" :wrapperCol="{span:20}">
        <a-tree-select show-search :tree-data="menuTreeData" v-model.trim="form.parentId" :filterTreeNode="filterTreeNode" :getPopupContainer="triggerNode => triggerNode.parentNode" allowClear>
        </a-tree-select>
      </a-form-model-item>
      <a-form-model-item label="菜单类型" :labelCol="{span:4}" :wrapperCol="{span:20}">
        <a-radio-group name="radioMenuType" v-model.trim="form.type">
          <a-radio value="1">目录</a-radio>
          <a-radio value="2">菜单</a-radio>
          <a-radio value="3">按钮</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item v-if="typeShow1" label="标签" :labelCol="{span:4}" :wrapperCol="{span:20}">
        <a-radio-group name="radioIsTab" v-model.trim="isTab">
          <a-radio value="0">否</a-radio>
          <a-radio value="1">是</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="菜单图标" :labelCol="{span:4}" :wrapperCol="{span:20}" v-if="!typeShow3">
        <a-popover trigger="click" placement="bottomRight">
          <template slot="content">
            <Select-icon @selected="selected" style="width:450px"></Select-icon>
          </template>
          <a-input v-model.trim="form.icon" placeholder="点击选择图标">
            <a-icon slot="prefix" v-if="form.icon" :type="form.icon" />
          </a-input>
        </a-popover>
      </a-form-model-item>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="菜单名称" prop="name">
            <a-input v-model.trim="form.name" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="显示排序" prop="sortNo">
            <a-input-number id="inputNumber" v-model.trim="form.sortNo" step="0.1" :min="0" :max="1000" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="typeShow2">
          <a-form-model-item label="是否外链" prop="isLink">
            <a-radio-group name="radioisLink" v-model.trim="form.isLink">
              <a-radio value="1">是</a-radio>
              <a-radio value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="typeShow2&&form.isLink==='1'">
          <a-form-model-item label="新窗口" prop="isBlank">
            <a-radio-group name="radioInternalOrExternal" v-model.trim="form.isBlank">
              <a-radio value="1">是</a-radio>
              <a-radio value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="'路由名称'" prop="componentName">
            <a-input v-model.trim="form.componentName" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="'路由地址'" prop="path">
            <a-input v-model="form.path" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="!typeShow1">
          <a-form-model-item :label="form.isLink==='1'?'外链地址':'组件路径'" prop="componentUrl">
            <a-input v-model.trim="form.componentUrl" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="typeShow2&&form.isLink!=='1'">
          <a-form-model-item label="缓存" prop="keepAlive">
            <a-radio-group name="radiokeepAlivel" v-model.trim="form.keepAlive">
              <a-radio value="1">是</a-radio>
              <a-radio value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col v-if="!typeShow2" :span="12">
          <a-form-model-item label="权限标识" prop="mytags">
            <ry-tab-input ref="tabInput" :mytags="form.mytags" @changeTags="changeTags"></ry-tab-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="!typeShow3">
          <a-form-model-item label="显示状态" prop="hidden">
            <a-radio-group name="radioHidden" v-model.trim="form.hidden">
              <a-radio value="0">显示</a-radio>
              <a-radio value="1">隐藏</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="菜单状态" prop="status">
            <a-radio-group name="radioStatus" v-model.trim="form.status">
              <a-radio value="1">正常</a-radio>
              <a-radio value="0">停用</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
// import { pick } from 'lodash'
import Tree from '@/components/bidreview/TreeNoP'
import SelectIcon from '@/components/selectIcon/SelectIcon'
export default {
  name: 'UserModal',
  props: ['url', 'menuTreeData'],
  components: { Tree, SelectIcon },
  data () {
    return {
      title: '操作',
      visible: false,
      confirmLoading: false,
      isTab: '0', // 是否标签
      form: {
        mytags: []
      },
      rules: {
        name: [
          { required: true, message: '菜单名称', trigger: 'blur' },
          { max: 32, message: '最大长度32字符', trigger: 'blur' }
        ],
        sortNo: [
          { required: true, message: '请选择顺序', trigger: 'blur' }
        ],
        isLink: [
          { required: true, message: '请选择是否外链', trigger: 'change' }
        ],
        isBlank: [
          { required: true, message: '请选择是否新窗口打开', trigger: 'change' }
        ],
        keepAlive: [
          { required: true, message: '请选择是否缓存', trigger: 'change' }
        ],
        componentUrl: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        componentName: [
          { required: true, message: '路由名称', trigger: 'blur' },
          { max: 32, message: '最大长度32字符', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入路由地址', trigger: 'blur' }
        ],
        mytags: [
          { validator: this.validMytags, trigger: 'change' }
        ],
        hidden: [
          { required: true, message: '请选择是否显示', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择菜单状态', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    typeShow1 () { // 显示目录
      return this.form.type === '1'
    },
    typeShow2 () { // 显示菜单
      return this.form.type === '2'
    },
    typeShow3 () { // 显示按钮
      return this.form.type === '3'
    },
    mytagsIsrequied () { // 判断权限字符是否必须
      return this.isTab === '1'
    }
  },
  watch: {
    typeShow3: {
      handler (val, oldVal) {
        if (val) {
          this.rules.componentName[0].required = false
          this.rules.path[0].required = false
        } else {
          this.rules.componentName[0].required = true
          this.rules.path[0].required = true
        }
      },
      immediate: true
    },
    'form.mytags': {
      handler (val, oldVal) {
        if (val && val.length) {
          this.isTab = '1'
        } else {
          this.isTab = '0'
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {

  },
  created () {
  },
  methods: {
    open () {

    },
    // mytags校验
    validMytags (rule, value, callback) {
      let mytags = this.form.mytags
      if (!this.mytagsIsrequied || !this.typeShow1) {
        return callback()
      }
      if (mytags && mytags.length) {
        return callback()
      } else {
        return callback(new Error('请添加至少一个权限'))
      }
    },
    filterTreeNode (inputValue, treeNode) {
      if (treeNode.componentOptions.propsData.title) {
        return treeNode.componentOptions.propsData.title.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
      }
    },
    showModal () {
      this.visible = true
    },
    addMenu (id = null) {
      this.title = '新增菜单'
      this.form.mytags = []
      this.form = { type: '1', icon: '', parentId: id }
    },
    editMenu (record) {
      this.disabled = false
      this.visible = true
      this.title = '修改菜单'
      this.confirmLoading = true
      this.$get(`${this.url.modalInfo}/${record.id}`).then(res => {
        this.form = { ...res.data }
        if (this.typeShow1 && this.isTab === '0') {

        }
        let mytags = (this.form.permission && this.form.permission.split(',')) || []
        this.$set(this.form, 'mytags', mytags)
        this.confirmLoading = false
      })
    },
    close () {
      this.visible = false
    },
    // 修改权限方法
    changeTags (val) {
      this.form.mytags = val
      Object.assign(this.form, { permission: val.join(',') })
    },
    handleOk () {
      // 触发表单验证
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          let url = ''
          if (!this.form.id) {
            url = this.url.add
          } else {
            url = this.url.edit
          }
          if (!this.form.parentId) {
            this.form.parentId = null
          }
          let params = null
          if (this.typeShow1) { // 目录
            params = {
              componentName: this.form.componentName,
              componentUrl: '',
              hidden: this.form.hidden,
              icon: this.form.icon,
              name: this.form.name,
              parentId: this.form.parentId,
              isLink: '0',
              path: this.form.path,
              permission: this.form.permission,
              sortNo: this.form.sortNo,
              status: this.form.status,
              type: this.form.type
            }
          } else if (this.typeShow2) { // 菜单
            params = {
              componentName: this.form.componentName,
              componentUrl: this.form.componentUrl,
              hidden: this.form.hidden,
              icon: this.form.icon,
              name: this.form.name,
              parentId: this.form.parentId,
              path: this.form.path,
              permission: null,
              isLink: this.form.isLink,
              isBlank: this.form.isBlank,
              keepAlive: this.form.keepAlive,
              sortNo: this.form.sortNo,
              status: this.form.status,
              type: this.form.type
            }
          } else if (this.typeShow3) { // 按钮
            params = {
              componentName: this.form.componentName,
              componentUrl: this.form.componentUrl,
              hidden: '1',
              icon: '',
              name: this.form.name,
              parentId: this.form.parentId,
              isLink: '0',
              path: this.form.path,
              permission: this.form.permission,
              sortNo: this.form.sortNo,
              status: this.form.status,
              type: this.form.type
            }
          }
          if (this.form.id) {
            params['id'] = this.form.id
          }
          this.$post(url, params).then(res => {
            if (this.isSuccess(res)) {
              this.confirmLoading = false
              this.$message.success('操作成功')
              this.visible = false
              this.$emit('ModalOk')
            } else {
              this.$message.error('操作失败')
              this.confirmLoading = false
            }
          }).catch(error => {
            console.error(error)
            this.confirmLoading = false
          })
        } else {
          return false
        }
      })
    },
    selected (icon) {
      this.form.icon = icon.name
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>

<style scoped>
</style>
